<template>
  <view class="big">
    <u-navbar title="" @rightClick="rightClick" :autoBack="true"> </u-navbar>
    <image :src="currentImgUrl" mode="aspectFill"></image>
    <view class="big-btn flex">
      <u-button
        icon="share-square"
        type="primary"
        shape="circle"
        iconColor="#3c9cff"
        open-type="share"
        >分享</u-button
      >
      <u-button
        icon="download"
        type="primary"
        shape="circle"
        iconColor="#3c9cff"
        @click="saveImageToAlbum"
        >保存</u-button
      >
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const currentImgUrl = ref('')

onLoad((option) => {
  currentImgUrl.value = option.url
})
// 保存图片到相册
const saveImageToAlbum = () => {
  uni.downloadFile({
    url: currentImgUrl.value,
    success: (downloadResult) => {
      if (downloadResult.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: downloadResult.tempFilePath,
          success(res) {
            uni.showToast({
              title: '图片保存成功',
              icon: 'success',
              duration: 2000
            })
          },
          fail(error) {
            console.log('保存失败：', error)
            if (error.errMsg.includes('auth')) {
              // 如果权限被拒绝，可以引导用户开启权限
              uni.showModal({
                title: '保存失败',
                content: '请授权允许保存图片到相册',
                success: (res) => {
                  if (res.confirm) {
                    uni.openSetting() // 打开设置引导用户手动授权
                  }
                }
              })
            } else {
              uni.showToast({
                title: '保存失败',
                icon: 'none',
                duration: 2000
              })
            }
          }
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.big {
  width: 100%;
  height: 100vh;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
  ::v-deep .u-status-bar {
    background-color: transparent !important;
  }
  ::v-deep .u-navbar__content {
    background-color: transparent !important;
  }
  .big-btn {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 260rpx;
    backdrop-filter: blur(6rpx);
    border-top: #eee 2rpx solid;
    border-radius: 50rpx 50rpx 0 0;
    ::v-deep .u-button {
      width: 45%;
      background-color: transparent !important;
    }
    ::v-deep .u-button--primary {
      color: #3c9cff !important;
      border-width: 4rpx;
      font-size: 32rpx;
    }
  }
}
</style>
